<template>
  <div class="app-console-action">
    <el-row
      class="crud-header mb-5"
      type="flex"
      justify="space-around"
    >
      <el-col>
        <el-button
          type="primary"
          @click="createProduct(null)"
        >添加商品</el-button>
        <div class="grid-content bg-purple" />
      </el-col>
      <el-col>
        <el-button
          type="text"
          @click="advanceSearch=!advanceSearch"
        >高级搜索</el-button>
        <el-button
          icon="el-icon-refresh-right"
          size="small"
          @click="onRefresh"
        />
        <el-button
          icon="el-icon-download"
          size="small"
          type="square"
          @click="onDownload"
        />
        <el-button
          size="small"
          type="square"
          icon="em-icon-circle-query"
          @click="visible = true"
        />
        <el-drawer
          title="操作提示"
          :visible.sync="visible"
        >
          <template slot="title">
            <div class="alert-icon">
              <em-icon name="shape-tools-compass" />
            </div>
            操作提示
          </template>
          <div>
            <div
              class="alert alert-custom alert-outline-light fade show mb-5"
              role="alert"
            >
              <div class="alert-icon">
                <em-icon name="shape-tools-compass" />
              </div>
              <div class="alert-text">
                <h5 class="alert-heading">操作提示</h5>
                <div class="text-muted font-size-sm">
                  <p class="mb-0">
                    当前显示的是已经审核通过的商品
                  </p>
                  <p class="mb-0">
                    如果商家的商品操作违规，平台可以操作违规下架，违规下架的商品需要商家编辑审核之后才能重新上架
                  </p>
                  <p class="mb-0">
                    上架，当商品处于非上架状态时，前台将不能浏览该商品，店主可控制商品上架状态
                  </p>
                  <p class="mb-0">
                    违规下架，当商品处于违规下架状态时，前台将不能购买该商品，只有管理员可控制商品违规下架状态，并且商品只有重新编辑后才能上架
                  </p>
                  <p class="mb-0">
                    设置项中可以查看商品详细、查看商品SKU。查看商品详细，跳转到商品详细页。查看商品SKU，显示商品的SKU、图片、价格、库存信息。
                  </p>
                </div>
              </div>
            </div>
          </div>
        </el-drawer>
      </el-col>
    </el-row>
    <filter-data
      v-if="advanceSearch"
      class="mt-5"
      :config="filterConfig"
      :filter-data="listQuery"
      @filter="filterSearch"
    />
  </div>
</template>

<script>
import pathToRegexp from 'path-to-regexp'

export default {
  name: 'ConsoleAction',
  props: {
    code: {
      type: [String, Object, Array],
      default: null
    },
    icon: {
      type: String,
      default: 'em-icon-script'
    },
    title: {
      type: String,
      default: 'CodeMirror'
    }
  },
  data() {
    return {
      levelList: null
    }
  },
  watch: {
    $route(route) {
      // if you go to the redirect page, do not update the breadcrumbs
      if (route.path.startsWith('/redirect/')) {
        return
      }
      this.getBreadcrumb()
    }
  },
  created() {
    this.getBreadcrumb()
  },
  methods: {
    getBreadcrumb() {
      // only show routes with meta.title
      const matched = this.$route.matched.filter(item => item.meta && item.meta.title)
      // const first = matched[0]

      // if (!this.isDashboard(first)) {
      //   matched = [{ path: '/', meta: { title: '控制台' }}].concat(matched)
      // }

      this.levelList = matched.filter(
        item => item.meta && item.meta.title && item.meta.breadcrumb !== false
      )
    },
    isDashboard(route) {
      const name = route && route.name
      if (!name) {
        return false
      }
      return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
    },
    pathCompile(path) {
      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
      const { params } = this.$route
      var toPath = pathToRegexp.compile(path)
      return toPath(params)
    },
    handleLink(item) {
      const { redirect, path } = item
      if (redirect) {
        this.$router.push(redirect)
        return
      }
      this.$router.push(this.pathCompile(path))
    }
  }
}
</script>

<style lang="scss" scoped>
.app-breadcrumb {
  position: relative;
  height: 50px;
  padding: 15px;
  display: flex;
  align-items: center;
  // border-bottom: 1px solid #e6ebf5;

  .el-breadcrumb {
    position: relative;
    font-size: 1rem;
    .no-redirect {
      color: #97a8be;
      cursor: text;
    }
  }
}
</style>
<style lang="scss">
.el-breadcrumb__separator {
  font-size: 10px;
}
</style>
